html, body { 
	height: 100%; 
	margin: 0; 
	padding: 0; 
}
body { 
	padding: 0 20px 0 20px; 
	background-color: rgb(247,247,247);
}

#lang {
	position: absolute;
	right: 20px;
	padding: 2px 6px 6px 16px;
	background-color: white;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

h1 {
	margin: 0;
	padding: 30px 0 0 0;
	font: bold 32px Arial;
	color: rgb(38,38,38);
	text-align: center;
}

h2 {
	margin: 30px 0 20px 0;
	padding: 0;
	font: italic 28px Georgia, Serif;
	letter-spacing: -1px;
	color: rgb(128,128,128);
	text-shadow: 1px 1px 0px rgb(255,255,255);
}

h1+h2 {
	margin-top: -2px;
	text-align: center;
}

#scale_coord, #scale_depth {
	display: inline-block;
	padding: 0 7px 0 4px;
	font: normal 28px/32px Courier;
	font-weight: 600;
	color: rgb(38,38,38);
	background-color: rgb(220,220,220);
	text-shadow: none;
}

sup { color: rgb(160,160,160); }

#metro { 
	position: relative; 
	width: 100%; 
	min-width: 700px;
	height: 100%; 
	min-height: 700px; 
	overflow: hidden; 
	background-color: white;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#metro ul li { 
	position: absolute;
	z-index: 1;
	margin: -6px 0 0 -6px;
	padding: 0 0 0 16px;
	list-style: none;
	font: normal 9px/12px Tahoma, Arial; 
	color: black; 
	/*text-shadow: 0 0 2px white;*/
	white-space: nowrap;
	background-color: rgba(255,255,255,0.33);
	background-repeat: no-repeat;
	background-position: -100px 0, 0 0;
	background-origin: border-box;
	border-radius: 6px;
	-ms-transform-origin: 		6px 6px;
	-webkit-transform-origin:	6px 6px;
	-moz-transform-origin:		6px 6px;
	-o-transform-origin:		6px 6px;
	transform-origin:			6px 6px;
	}
#metro ul li:hover {
	text-decoration: underline;
	background-position: 0 0;
	cursor: pointer;
}

.noCaptions#metro ul li { 
	width: 0; 
	overflow: hidden; 
	background-color: transparent; 
}

#metro ul span {
	position: absolute;
	z-index: 0;
	padding: 0;
	margin: 0;
	margin-top: -3px;
	height: 6px;
	-ms-transform-origin: 0 50%;
	-webkit-transform-origin: 0 50%;
	-moz-transform-origin: 0 50%;
	-o-transform-origin: 0 50%;
	transform-origin: 0 50%;
}
#metro ul span:hover {
	outline: 3px solid #a0c5e8;
	cursor: pointer;
}

#metro ul li, #metro ul span {
	-ms-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;	
	
	-ms-transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	transition-timing-function: ease;	
}
#metro ul li {
	-ms-transition-property: left, top;
	-webkit-transition-property: left, top;
	-moz-transition-property: left, top;
	-o-transition-property: left, top;
	transition-property: left, top;
}
#metro ul span {
	-ms-transition-property: -ms-transform, left, top, width;
	-webkit-transition-property: -webkit-transform, left, top, width;
	-moz-transition-property: -moz-transform, left, top, width;
	-o-transition-property: -o-transform, left, top, width;
	transition-property: transform, left, top, width; /*, height, padding, margin, line-height, background-size; */
}

.noAnimation#metro ul li, .noAnimation#metro ul span {
	-ms-transition-duration: 0s;
	-webkit-transition-duration: 0s;
	-moz-transition-duration: 0s;
	-o-transition-duration: 0s;
	transition-duration: 0s;	
}

#L0 li { background-image: URL('hover.png'), URL('L0.svg'); }
#L0 span { background-color: #894e35; }

#L1 li { background-image: URL('hover.png'), URL('L1.png'); }
#L1 span { background-color: #ed1b35; }

#L2 li { background-image: URL('hover.png'), URL('L2.png'); }
#L2 span { background-color: #44b85d; }

#L3 li { background-image: URL('hover.png'), URL('L3.png'); }
#L3 span { background-color: #0078bf; }

#L4 li { background-image: URL('hover.png'), URL('L4.png'); }
#L4 span { background-color: #19c1f3; }

#L5 li { background-image: URL('hover.png'), URL('L5.png'); }
#L5 span { background-color: #f58232; }

#L6 li { background-image: URL('hover.png'), URL('L6.png'); }
#L6 span { background-color: #8e479c; }

#L7 li { background-image: URL('hover.png'), URL('L7.png'); }
#L7 span { background-color: #ffcb31; }

#L8 li { background-image: URL('hover.png'), URL('L8.png'); }
#L8 span { background-color: #a1a2a3; }

#L9 li { background-image: URL('hover.png'), URL('L9.png'); }
#L9 span { background-color: #b3d445; }

#L10 li { background-image: URL('hover.png'), URL('L10.png'); }
#L10 span { background-color: #82c0c0; }

#L11 li { background-image: URL('hover.png'), URL('L11.png'); }
#L11 span { background-color: #acbfe1; }

#L12 li { background-image: URL('hover.png'), URL('L12.png'); }
#L12 span { background-color: #ffa8af; }

#L13 li { background-image: URL('hover.png'), URL('L13.png'); }
#L13 span { 
	background: url(L13-line.png) center center repeat-x; 
    border-top: solid 2px #FFD702;
    border-bottom: solid 2px #82C0C0;
}

#L14 li { background-image: URL('hover.png'), URL('L14.png'); }
#L14 span { background-color: #de64a1; }

#M li { background-image: URL('hover.png'), URL('M.png'); }
#M span { background-color: #abbfe1; }

#interchanges span { 
	border-top: dotted 2px black; 
	border-bottom: dotted 2px black; 
	height: 6px;
	margin-top: -3px;
}

#metro a.button {
	display: block;
	position: absolute;
	z-index: 9999;
	background-color: rgba(224,224,224,0.8);
	border: solid 1px rgba(216,216,216,0.8);
	font: normal 26px Arial;
	color: #909090;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
}
#metro a.button:hover {
	background-color: rgba(240,240,240,0.8);
	border-color: rgba(232,232,232,0.8);
	box-shadow: 0 0 3px rgba(0,0,0,0.15);
}

#metro a.button span  {
	display: inline-block;
	width: 100%;
	height: 100%;
}

#metro a#up {
	width: 80px;
	height: 40px;
	top: 0;
	left: 50%;
	margin: 20px 0 0 -40px;
	line-height: 40px;
	border-radius: 15px 15px 0 0;
}

#metro a#down {
	width: 80px;
	height: 40px;
	bottom: 0;
	left: 50%;
	margin: 0 0 20px -40px;
	line-height: 40px;
	border-radius: 0 0 15px 15px;
}

#metro a#left {
	width: 40px;
	height: 80px;
	top: 50%;
	left: 0;
	margin: -40px 0 0 20px;
	line-height: 80px;
	border-radius: 15px 0 0 15px;
}

#metro a#right {
	width: 40px;
	height: 80px;
	top: 50%;
	right: 0;
	margin: -40px 20px 0 0;
	line-height: 80px;
	border-radius: 0 15px 15px 0;
}

#metro a#plus {
	width: 40px;
	height: 40px;
	top: 20px;
	left: 20px;
	line-height: 40px;
	border-radius: 5px;
}

#metro a#minus {
	width: 40px;
	height: 40px;
	top: 80px;
	left: 20px;
	line-height: 40px;
	border-radius: 5px;
}

#metro a#flat {
	width: 40px;
	height: 40px;
	top: 140px;
	left: 20px;
	line-height: 36px;
	border-radius: 5px;
	font-size: 30px;
}
#metro a#flat span span {
	display: block; 
	position: absolute; 
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	line-height: 36px;
}

#metro #switches {
	display: block;
	position: absolute;
	z-index: 9998;	
	right: 0;
	top: 20px;
	width: 45%;
	text-align: right;
}

#metro #switches a, #metro #switches > span, #lang a, #lang span {
	display: inline-block;
	margin: 0 16px 0 0;
	padding: 2px 2px 4px 2px;
	font: normal 16px/1.2 Georgia, Serif;
	color: rgb(128,128,128);
	text-decoration: none;
	border-bottom: dashed 1px rgb(128,128,128);
	background-color: rgba(255,255,255,0.5);
}
#metro #switches span {
	vertical-align: middle;
}
#metro #switches > span > * {
	margin-right: 0;
}
#metro #switches > span {
	border-bottom: none;
}
#metro #switches #scroll {
	margin-left: 10px;
}
#lang a, #lang span {
	margin-right: 10px;
	padding-bottom: 1px;
	background: none;
}
#lang span {
	color: #a0a0a0;
	border-bottom-color: white;
}
#metro #switches a:hover, #lang a:hover {
	color: red;
	border-bottom-color: red;
}

#metro #select-year {
	display: block;
	position: absolute;
	z-index: 9998;	
	top: 20px;
	width: 50%;
}

#metro #select-year h2 {
	display: inline-block;
	margin: 0 -80px 0 96px;
	background-color: rgba(255,255,255,0.5);
}

#metro #select-year select {
	display: inline-block;
	margin: 0 0 0 96px;
	font: normal 28px/40px Georgia, Serif;
	color: rgb(128,128,128);
}

#metro a:focus { outline: none; }

#text {
	width: 100%;
	padding: 0 0 20px 0;
	overflow: hidden;
	white-space: nowrap;
}

.column {
	display: inline-block;
	vertical-align: top;
	width: 30%;
	padding: 1% 3% 0 0;
	white-space: normal;
}

.column p, .column li {
	margin: 14px 0 0 0;
	padding: 0;
	font: normal 16px Georgia, Serif;
	line-height: 1.25;
	color: rgb(38,38,38);
}

.column li {
	margin-top: 10px;
}

.column p.smi > img {
	float: left;
	height: 40px;
	margin-right: 10px;
}

.column p.smi > span {
	display: block;
	margin-left: 50px;
}

.column p.smi > span > b {
	font-size: 14px;
}

.column p.smi > span > i {
	font-style: normal;
	color: rgb(160,160,160);
}

.column p.smi > span > a {
	text-decoration: none;
	border-bottom: none;
	color: #0054b9;
}
.column p.smi > span > a:hover {
	color: red;
}

.column ol {
	margin: 0;
	padding: 0;
	counter-reset: list 0;
}

.column li {
	padding-left: 25px;
	text-indent: -25px;
	list-style-type: none;
	color: rgb(160,160,160);
}

.column li:before {
	counter-increment: list;
	content: "[" counter(list) "] ";
}

.column a, #footer a {
	color: rgb(160,160,160);
	text-decoration: none;
	border-bottom: solid 1px rgb(223,223,223);
}
.column a:hover, #footer a:hover {
	color: red;
	text-decoration: none;
	border-bottom-color: rgb(255,190,168);
}

.yashare-auto-init a {
	border: none;
}

#footer {
	width: 100%;
	height: 60px;
	margin: 20px 0 0 0;
	padding: 20px 0 0 0;
	border-top: solid 1px rgb(192,192,192);
	font: normal 14px Georgia, Serif;
	color: rgb(38,38,38);
}

#footer div {
	display: inline-block;
	margin-right: 40px;
}

#footer a.author {
	color: rgb(38,38,38);
	text-decoration: none;
	border-bottom: solid 1px rgb(183,183,183);
}
#footer a.author:hover {
	color: red;
	text-decoration: none;
	border-bottom-color: rgb(255,190,168);
}

#ads-bottom {
	margin-top: 30px;
}

.ad-banner#ad-metro-top {
	display: block;
	z-index: 9999;
	width: 338px; /* 452px */
	position: absolute;
	top: 80px;
	right: 20px;
}

.ad-banner#ad-metro-bottom {
	display: block;
	z-index: 9999;
	width: 338px; /* 452px */
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.ad-banner-close {
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	top: -21px;
	left: -21px;
	background: url(icon-close-24.png) no-repeat;
	cursor: pointer;
}

/*
#ad-banner#metro-bottom > .ad-banner-close {
	left: auto;
	right: -21px;
}
*/
